<template>
  <!-- 本月收缴 -->
  <div class="collection-rate chart-box2">
    <div class="chart-title">本月收缴</div>
    <div class="chart-content">
      <div class="text-number-1">
        <div>本月到账金额</div>
        <div class="number">
          <count-to
            :start-val="data.incomeAmount.oldVal"
            :end-val="data.incomeAmount.newVal"
            :duration="3000"
          />
        </div>
      </div>
      <div class="chart-container" :id="chartId"></div>
    </div>
  </div>
</template>

<script>
import {
  defineComponent,
  onMounted,
  reactive,
  toRefs,
  onBeforeUnmount,
  nextTick,
  watch,
  toRaw,
} from "vue";
import { Chart, registerTheme, registerShape } from "@antv/g2";
import common from "../../utils/common";
import store from "../../../../store";
import CountTo from "../countTo/index.vue";

export default defineComponent({
  name: "CollectionRate",
  components: { CountTo },
  setup() {
    const state = reactive({
      chartId: "collectionRateChart",
      chart: null,
      data: {
        incomeAmount: { ...common.countToInit },
        incomeRate: 0,
      },
    });

    const initChart = () => {
      registerShape("point", "pointer", {
        draw(cfg, container) {
          const group = container.addGroup();
          const center = this.parsePoint({ x: 0, y: 0 }); // 获取极坐标系下画布中心点
          // 绘制指针
          group.addShape("line", {
            attrs: {
              x1: center.x,
              y1: center.y,
              x2: cfg.x,
              y2: cfg.y,
              stroke: cfg.color,
              lineWidth: 2,
              lineCap: "round",
            },
          });
          group.addShape("circle", {
            attrs: {
              x: center.x,
              y: center.y,
              r: 4.75,
              stroke: cfg.color,
              lineWidth: 2,
              fill: "#fff",
            },
          });

          return group;
        },
      });

      const data = [{ value: state.data.incomeRate }];

      state.chart = new Chart({
        container: state.chartId,
        autoFit: true,
        theme: "chartTheme",
        padding: [10, 40, 40, 0],
      });

      state.chart.data(data);

      state.chart.scale("value", {
        min: 0,
        max: 100,
        tickInterval: 10,
      });
      state.chart.coordinate("polar", {
        startAngle: (-9 / 8) * Math.PI,
        endAngle: (1 / 8) * Math.PI,
        radius: 1,
      });

      // state.chart.axis("1", false);
      state.chart.axis("value", {
        line: null,
        label: {
          offset: -32,
          style: {
            textAlign: "center",
            textBaseline: "middle",
          },
        },
        subTickLine: {
          count: 4,
          length: -10,
        },
        tickLine: {
          length: -16,
        },
        grid: null,
      });
      state.chart.legend(false);
      state.chart
        .point()
        .position("value*1")
        .shape("pointer")
        .color(common.theme.lightGreen)
        .animate({
          appear: {
            animation: "fade-in",
          },
        });

      // 绘制仪表盘背景
      // state.chart.annotation().arc({
      //   top: false,
      //   start: [0, 1],
      //   end: [9, 1],
      //   style: {
      //     stroke: "rgba(255,255,255,0.8)",
      //     lineWidth: 12,
      //     lineDash: null,
      //   },
      // });

      // 绘制指标
      state.chart.annotation().arc({
        start: [0, 1],
        end: [data[0].value, 1],
        style: {
          stroke: common.theme.lightGreen,
          lineWidth: 8,
          lineDash: null,
        },
      });
      // 绘制指标数字
      state.chart.annotation().text({
        position: ["50%", "90%"],
        content: "收缴率",
        style: {
          fontSize: 14,
          fill: common.theme.lightWhite,
          textAlign: "center",
        },
      });
      state.chart.annotation().text({
        position: ["50%", "100%"],
        content: `${data[0].value}%`,
        style: {
          fontSize: 24,
          fill: common.theme.lightGreen,
          textAlign: "center",
          fontWeight: "bold",
        },
        offsetY: 15,
      });

      state.chart.render();
    };

    watch(
      () => store.getters.rentControl.ConfirmIncome,
      (val) => {
        if (val) {
          getData();
        }
      }
    );

    const getData = () => {
      const { ConfirmIncome } = store.getters.rentControl;
      if (ConfirmIncome) {
        console.log("---------ConfirmIncome", toRaw(ConfirmIncome));
        state.data.incomeRate = Number(ConfirmIncome.incomeRate);
        state.data.incomeAmount.oldVal = state.data.incomeAmount.newVal;
        state.data.incomeAmount.newVal = ConfirmIncome.incomeAmount;
        if (state.chart) {
          state.chart.changeData([{ value: state.data.incomeRate }]);
        } else {
          nextTick(() => {
            initChart();
          });
        }
      }
    };

    onMounted(() => {
      registerTheme("chartTheme", common.chartTheme);
      getData();
    });
    onBeforeUnmount(() => {
      const chartBox = document.getElementById(state.chartId);
      if (chartBox) {
        chartBox.innerHTML = "";
      }
    });
    return {
      ...toRefs(state),
    };
  },
});
</script>

<style lang="less" scoped>
@import "../../styles/common.less";
.collection-rate {
  .chart-content {
    position: relative;
    .text-number-1 {
      position: absolute;
      z-index: 10;
      right: 0px;
      top: 0px;
      text-align: right;
      color: #fff;
      font-size: 1.4rem;
      background: rgba(0, 0, 0, 0.36);
      padding: 1rem 2rem;
      border-radius: 4px;
      .number {
        font-size: 2.8rem;
        margin-top: 0;
        color: @lightGreen;
      }
    }
  }
}
</style>
